<template>
	<view>
		<view class="bgwhite w94 radius20" style="padding: 20rpx;margin-top: 40rpx;">
			<view class="flex-between">
				<view class="">
					<text>我的头像</text>
					<view class="sub-text" style="font-size: 24rpx;padding-top: 10rpx;color: #c1c1c1;">
						真实头像能提高接单及中选率
					</view>
				</view>
				<view class="bet">
					<u-icon size="80" v-if="info.avatar" :name="info.avatar"></u-icon>
					<u-icon size="80" v-else name="/static/lg.png"></u-icon>
					<!-- <u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon> -->
				</view>
			</view>
			<view class="flex-between">
				<view class="">
					<text>昵称</text>
				</view>
				<view class="right-text">
					<u--input placeholder="请输入新昵称"
						prefixIconStyle="font-size: 22px;color: #909399;width:30rpx;height:30rpx" border="none"
						inputAlign="right" v-model="nkname" maxlength="8" @blur="reset">
					</u--input>
				</view>
			</view>
			<view class="sub-text" style="font-size: 24rpx;color: #c1c1c1;padding-left: 20rpx;">
				点击昵称可直接编辑修改
			</view>
			<view class="flex-between" @click="to('/subpack/user/syset/nameauth?type=1')">
				<view class="">
					<text>真实姓名</text>
				</view>
				<view class="right-text">
					{{ info.true_name || '王*' }}
				</view>
			</view>
			<!-- <view class="flex-between" @click="to('/subpack/user/syset/phonenum?type=1')">
				<view class="">
					<text>联系电话</text>
				</view>
				<view class="bet">
					<view class="right-text">
						{{ info.mobile || 12345678901 }}
					</view>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view> -->
			<view class="flex-between" @click="to('/subpack/user/syset/phonenum?type=2')">
				<view class="">
					<text>紧急联系电话</text>
				</view>
				<view class="bet">
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>
			<view class="flex-between" @click="to('/subpack/user/syset/nameauth?type=2')">
				<view class="">
					<text>企业认证</text>
				</view>
				<view class="bet">
					<view class="right-text">
						认证提高中选率
					</view>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>
			<view class="flex-between">
				<view class="">
					<text>通知设置</text>
				</view>
				<view class="">
					<u-switch v-model="switchLock" @change="debouncedChangeHandler" activeColor="#CEEE5B"
						size="35"></u-switch>
				</view>
			</view>
		</view>

		<!-- 	<view class="bgwhite" style="width:100%;margin-top: 20rpx;text-align: center;color:red;padding:20rpx 0rpx;">
			退出登陆
		</view> -->
		<view class="bgwhite w94 radius20" style="padding: 20rpx;margin-top: 40rpx;">
			<view class="flex-between" @click="to('/subpack/user/syset/password?type=1')">
				<view class="">
					<text>支付密码</text>
				</view>
				<view class="bet">
					<view class="right-text">
						去设置
					</view>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>
			<view class="flex-between" @click="to('/subpack/user/syset/phonenum?type=3')">
				<view class="">
					<text>修改登录手机号</text>
				</view>
				<view class="bet">
					<view class="right-text">
						{{ info.mobile || 12345678901 }}
					</view>
					<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
						label-size="24"></u-icon>
				</view>
			</view>
			<view class="flex-between" @click="to('/subpack/user/deluser')">
				<view class="">
					<text>注销账号</text>
				</view>
				<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
					label-size="24"></u-icon>
			</view>
			<view class="flex-between" @click="to('/subpack/user/syset/feedback')">
				<view class="">
					<text>意见反馈</text>
				</view>
				<u-icon name="arrow-right" label-pos="left" color="#6a6a6a" label-color="#6a6a6a" size="24"
					label-size="24"></u-icon>
			</view>
		</view>
		<view class="flex" style="justify-content: center;position: fixed;bottom: 40rpx;width: 100%;">
			<view class=""
				style="width: 80%;height: 90rpx;border-radius: 90rpx;background-color: #fff;text-align: center;line-height: 2.5;margin-top: 40rpx;"
				@click="save">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		profile
	} from '@/common/teacherReq';
	export default {
		data() {
			return {
				switchLock: true,
				nkname: ''
			}
		},
		computed: {
			info() {
				return uni.getStorageSync('info')
			}
		},
		methods: {
			to(url) {
				uni.navigateTo({
					url
				})
			},
			changeHandler(e) {
				console.log('e: ', e);
				this.switchLock = e;
				profile({
					actiive_system_notify: this.switchLock ? 1 : 0
				}).then(res => {
					uni.showToast({
						icon: this.switchLock ? 'success' : 'error',
						title: this.switchLock ? '开启成功' : '已关闭',
					});
				});
			},
			debounce(func, delay) {
				let timeout;
				return (...args) => {
					clearTimeout(timeout);
					timeout = setTimeout(() => func.apply(this, args), delay);
				};
			},
			reset() {
				if (this.nkname.trim().length > 0) {
					profile({
						nickname: this.nkname
					}).then(res => {
						uni.showToast({
							icon: 'success',
							title: '修改成功',
						});
					});
				}
			}
		},
		onLoad() {
			this.switchLock = this.info.actiive_system_notify ? true : false
		},
		created() {
			// 在这里定义 debouncedChangeHandler 确保 `this` 是组件实例
			this.debouncedChangeHandler = this.debounce(this.changeHandler, 800);
			this.nkname = this.info.nickname
		}
	}
</script>

<style scoped lang="scss">
	.flex-between {
		padding: 20rpx;
	}

	.bet {
		display: flex;
		justify-content: space-between;

		.right-text {
			font-size: 26rpx;
			color: #c1c1c1;
		}
	}

	.right-text {
		font-size: 26rpx;
		color: #c1c1c1;
	}
</style>